<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form size="small" :model="pageData" layout="inline">
            <a-form-item label="流转卡号">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="pageData.circulatCard"/>
            </a-form-item>
            <a-form-item label="客户名称">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="pageData.customName"/>
            </a-form-item>
            <a-form-item label="客户订单号">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="pageData.customOrderCode"/>
            </a-form-item>
            <a-form-item label="计划单号">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="pageData.planOrderCode"/>
            </a-form-item>
            <a-form-item label="开单日期" style="margin-left: 16px;">
              <a-date-picker popup-container="html" class="bacClass" v-model="pageData.stockOutDate"/>
            </a-form-item>
          </a-form>
        </div>

      </div>

      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
      <div style="float: right;">
        <Toolbar :items="toolbarList" @add="addHandler" @select="selectHandler" @del="deleteHandler"
                 @export="EXELTABLE(tc2, pageData.dataListOP, '毛坯出库存明细')" @audit="audits">
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
        <a-tab-pane title="未处理" :key="1">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           rowSelection="multiple" @grid-ready="gridReady" style="height: calc(100% - 45px)"
                           :defaultColDef="defaultColDef"
                           class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1">
          </AgGridVuesCopys>
          <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                           @change="PageSize" @page-size-change="change" style="justify-content: center"
                           :page-size="pagination.pageSize" :current="pagination.page"/>
        </a-tab-pane>
        <a-tab-pane title="已处理" :key="2">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           rowSelection="multiple" @grid-ready="gridReady2" style="height: calc(100% - 45px)"
                           :defaultColDef="defaultColDef2"
                           class='ag-theme-alpine' :rowData="pageData.dataListOP" :columnDefs="tc2"
                           :localeText="localeText1">
          </AgGridVuesCopys>
          <paginationCopys :page-size-options="pagingList1" :total="total1" show-total show-jumper show-page-size
                           @change="PageSize" @page-size-change="change" style="justify-content: center"
                           :page-size="pagination.pageSize" :current="pagination.page"/>
        </a-tab-pane>
      </a-tabs>
    </template>
    <a-drawer :drawer-style="{ 'zIndex': 999 }" :mask-closable="false" height="100%" :visible="pageData.showAdd8"
              unmountOnClose @ok="sideOk" @cancel="pageData.showAdd8 = false" cancel-text='关闭' ok-text='保存'
              placement="bottom">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="min-width:800px;">
        <div>
          <a-form ref="formRef" size="small" :model="objectOP" layout="inline">
            <a-form-item label="出库单号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" disabled v-model="objectOP.stockOutCode"></a-input>
            </a-form-item>
            <a-form-item label="流转卡号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.circulatCard" @press-enter="CKonly"></a-input>
            </a-form-item>
            <a-form-item label="开单日期" :style="{ width: '345px' }" label-col-flex="100px">
              <a-date-picker popup-container="html" :style="{ width: '229px' }" class="bacClass"
                             v-model="objectOP.stockOutDate"/>
            </a-form-item>
            <a-form-item label="仓库名称" :style="{ width: '345px' }" label-col-flex="100px">
              <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                        v-model="objectOP.warehouseName" :filter-option="false" allow-search @search="handleSearch2"
                        @focus="focusSel2">
                <a-option v-for="item in pageData.nameList2" :value="item['warehouseName']">{{
                    item['warehouseName']
                  }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="计件日期" :style="{ width: '345px' }" label-col-flex="100px">
              <a-date-picker popup-container="html" :style="{ width: '229px' }" class="bacClass"
                             v-model="objectOP.reckonPieceDate"/>
            </a-form-item>
            <a-form-item label="客户名称" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.customName"></a-input>
            </a-form-item>
            <a-form-item label="计划单号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.planOrderCode"></a-input>
            </a-form-item>
            <a-form-item label="客户订单号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.customOrderCode"></a-input>
            </a-form-item>
            <a-form-item label="色号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input disabled class="bacClass" v-model="objectOP.colorCode"></a-input>
            </a-form-item>
            <a-form-item label="色称" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input disabled class="bacClass" v-model="objectOP.colorName"></a-input>
            </a-form-item>
            <a-form-item label="交货日期" :style="{ width: '345px' }" label-col-flex="100px">
              <a-date-picker popup-container="html" :style="{ width: '229px' }" class="bacClass"
                             v-model="objectOP.deliveryDate"/>
            </a-form-item>
            <a-form-item label="等待工序" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.waitProcess"></a-input>
            </a-form-item>
            <a-form-item label="搬运方式" :style="{ width: '345px' }" label-col-flex="100px">
              <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                        @search="handleSearch"
                        v-model="objectOP.carryTypeName" :filter-option="false" allow-search @focus="focusSel">
                <a-option v-for="item in pageData.nameList" :value="item['providerName']">{{
                    item['providerName']
                  }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="生产车间" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.workshop"></a-input>
            </a-form-item>
            <a-form-item label="原流转卡号" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.oldCirculatCard"></a-input>
            </a-form-item>
            <a-form-item label="对色资料" :style="{ width: '345px' }" label-col-flex="100px">
              <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                        @search="handleSearch1"
                        v-model="objectOP.contrastColor" :filter-option="false" allow-search @focus="focusSel1">
                <a-option v-for="item in pageData.nameList1" :value="item['providerName']">{{
                    item['providerName']
                  }}
                </a-option>
              </a-select>
            </a-form-item>

            <a-form-item label="生产流程" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.productionProcess"></a-input>
            </a-form-item>
            <a-form-item label="备注" :style="{ width: '345px' }" label-col-flex="100px">
              <a-input class="bacClass" v-model="objectOP.remark"></a-input>
            </a-form-item>
            <a-form-item :style="{ width: '345px' }" label-col-flex="100px">
              <el-checkbox v-model="objectOP.fastReverseState" :true-label="1"
                           :false-label="0">快反
              </el-checkbox>
            </a-form-item>
          </a-form>
        </div>
      </div>

      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady1" style="height:30%" :defaultColDef1="defaultColDef1"
                       class='ag-theme-alpine'
                       :rowData="tableDataList1" :columnDefs="dc" :localeText="localeText1"></AgGridVuesCopys>
      <div style="margin: 5px 0px 15px 15px;">
        <el-button style="color:#165dff;" class="gesture" link>库存</el-button>
        <el-button style="color:#165dff;" class="gesture" link @click="delet">删除</el-button>
        <el-button v-if="objectOP.parisonState == 0" style="color:#165dff;" class="gesture" link
                   @click="lookSet">库存查询
        </el-button>

      </div>

      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady1_2" style="height:30%" :defaultColDef1_2="defaultColDef1_2"
                       class='ag-theme-alpine'
                       :rowData="tableDataList1_2" :columnDefs="dc2" :localeText="localeText1"></AgGridVuesCopys>
    </a-drawer>
    <a-modal v-model:visible="visiblecg" ok-text="确定" @ok="print" :width="1200">
      <div class="contioner" style="height: 100%;">
        <div class="search-form isheader" v-show="headerShow" v-if="query.isDoes == false">
          <a-form size="small" :model="query" layout="inline">
            <a-form-item label="坯布编号">
              <a-input allow-clear v-model="query.greyCode" :style="{ width: '200px' }" class="bacClass"/>
            </a-form-item>
            <a-form-item label="坯布名称">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.greyName"/>
            </a-form-item>
            <a-form-item label="计划单号">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="query.customOrderCode"/>
            </a-form-item>
            <a-form-item label="客户名称">
              <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.custumName"/>
            </a-form-item>
            <a-form-item label="托盘编号" label-width="90px">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.shelvesCode"/>
            </a-form-item>
            <a-form-item label="库位" label-col-flex="65px">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.storageName"/>
            </a-form-item>
            <a-form-item label="流转卡号" label-width="90px">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass"
                       v-model="query.circulatCard"/>
            </a-form-item>
            <a-form-item label="布号" label-col-flex="65px">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.clothCode"/>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-tool-bar" style="margin-bottom: 5px">
          <a-space>
            <el-button @click="getList" type="primary" :icon="Search">查询</el-button>
            <el-button plain @click="splitAdjustment">拆分</el-button>
          </a-space>
        </div>
        <div :style="{ height: '400px', padding: '10px' }">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           v-loading="loadingElplus" rowSelection="multiple" @grid-ready="gridReady5"
                           style="height: 90%"
                           :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="pageData.dataList"
                           :columnDefs="tableColumns" :localeText="localeText1"></AgGridVuesCopys>
          <paginationCopys :total="pageData.total" show-total show-jumper show-page-size @change="PageSize"
                           @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                           :current="query.page" :page-size-options="pagingList1"/>
        </div>
        <el-dialog style="width: 500px" v-model="pageData.dialogFormVisible" :title="'拆分'"
                   v-loading="loadingElplus1">
          <el-form :model="form">
            <el-form-item label="条形码:" label-width="80px">
              <span>{{ form.clothfiyCode }}</span>
            </el-form-item>
            <el-form-item label="原重:" label-width="80px">
              <span>{{ form.formerWeight }}</span>
            </el-form-item>
            <el-form-item label="拆分重量:" label-width="80px">
              <el-input v-model="form.splitWeight"/>
            </el-form-item>
          </el-form>
          <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="save"> 确认 </el-button>
                        </span>
          </template>
        </el-dialog>
      </div>
    </a-modal>
    <a-modal v-model:visible="visiblecg1" :width="1400">
      <template #title> 详情</template>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady1_2" style="height:50vh" :defaultColDef1_2="defaultColDef1_2"
                       class='ag-theme-alpine'
                       :rowData="tableDataList1_2" :columnDefs="dc2" :localeText="localeText1"></AgGridVuesCopys>
      <!-- <template #footer>
          <span class="dialog-footer">
              <el-button @click="visiblecg1.value = false">取消</el-button>
          </span>
      </template> -->
    </a-modal>
  </pageTabelLayout>
</template>
<script setup lang="ts">
import {
  useTable,
  useRowKey,
  useTableColumn,
  usePagination,
  useRowSelection,
} from "@/hooks/table";
import {ref, reactive} from "vue"
import {post, get} from "@/api/http"
import {localeText} from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import {Message, Modal} from "@arco-design/web-vue"
import {Search, Download, Printer} from '@element-plus/icons-vue'
import {FormInstance} from "@arco-design/web-vue/es/form";
import {pagingList} from "@/api/paging";
import {EXPORTEXEL, EXELTABLE} from '@/utils/exportEXCEL'

const toolbarList: any = ref(['查询', '新增', '删除', '审核'])
let isIDs: any = ref(1);


function PageSize(val: any) {
  if (isIDs.value == 1) {
    pagination.page = val
    doRefresh();
  } else if (isIDs.value == 2) {
    pagination2.page = val
    doRefresh1();
  }
}

function change(val: any) {
  if (isIDs.value == 1) {
    pagination.pageSize = val
    doRefresh();
  } else {
    pagination2.pageSize = val
    doRefresh1();
  }
}


const headerShow = ref(true)

const tableDataList = ref([])

const tableDataList2: any = ref([])

const tableDataList1 = ref([])

const tableDataList1_2: any = ref([])


const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}

const gridOption5 = ref()
const gridReady5 = (params: any) => {
  gridOption5.value = params.api
}

const gridOption2 = ref()
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}

const gridOption1 = ref()
const gridReady1 = (params: any) => {
  gridOption1.value = params.api
}

const gridOption1_2 = ref()
const gridReady1_2 = (params: any) => {
  gridOption1_2.value = params.api
}

const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
}

const defaultColDef2 = {
  sortable: true,
  resizable: true,
  filter: true,
}

const defaultColDef1 = {
  sortable: true,
  resizable: true,
  filter: true,
}

const defaultColDef1_2 = {
  sortable: true,
  resizable: true,
  filter: true,
}

const localeText1: any = ref(localeText)

const tc = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '出库单号',
    field: 'stockOutCode',
    width: 150
  },
  {
    headerName: '开单日期',
    field: 'stockOutDate',
    width: 150
  },
  {
    headerName: '流转卡号',
    field: 'circulatCard',
    width: 150,
    filter: 'circulatCard',
  },
  {
    headerName: '仓库名称',
    field: 'warehouseName',
    width: 150
  },
  {
    headerName: '计件日期',
    field: 'reckonPieceDate',
    width: 150
  },
  {
    headerName: '客户名称',
    field: 'customName',
    width: 150
  },
  {
    headerName: '计划单号',
    field: 'planOrderCode',
    width: 150
  },
  {
    headerName: '客户订单号',
    field: 'customOrderCode',
    width: 150
  },
  {
    headerName: '色号',
    field: 'colorCode',
    width: 150
  },
  {
    headerName: '色称',
    field: 'colorName',
    width: 150
  },
  {
    headerName: '交货日期',
    field: 'deliveryDate',
    width: 150
  },
  {
    headerName: '等待工序',
    field: 'waitProcess',
    width: 150
  },
  {
    headerName: '搬运方式',
    field: 'carryTypeName',
    width: 150
  },
  {
    headerName: '生产车间',
    field: 'workshop',
    width: 150
  },
  {
    headerName: '原流转卡号',
    field: 'oldCirculatCard',
    width: 150
  },
  {
    headerName: '对色资料',
    field: 'contrastColor',
    width: 150
  },
  {
    headerName: '生产流程',
    field: 'productionProcess',
    width: 150
  },
  {
    headerName: '备注',
    field: 'remark',
    width: 150
  },
  {
    headerName: '创建人',
    field: 'createName',
    width: 150
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 150
  },
  {
    headerName: '修改人',
    field: 'updateName',
    width: 150
  },
  {
    headerName: '修改时间',
    field: 'updateTime',
    width: 150
  },
  {
    headerName: '状态',
    field: 'auditState',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <a-space>
          <el-tag type="success" class="gesture">未审核</el-tag>
        </a-space>
      `,
      setup(props: any) {
        return {
          auditState: props.params.data.auditState
        }
      }
    }
  },
  {
    headerName: '操作',
    field: 'id',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <el-button style="color:#165dff;" @click="a" class="gesture" link>修改</el-button>
      `,
      setup(props: any) {
        const a = () => {
          editHandler(props.params.data)
        }
        return {
          a
        }
      }
    }
  }
]

const tc2 = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '出库类型',
    field: 'stockOutCode',
    width: 150
  },
  {
    headerName: '开单日期',
    field: 'stockOutDate',
    width: 150
  },
  {
    headerName: '流转卡号',
    field: 'circulatCard',
    width: 150,
    filter: 'circulatCard',
  },
  {
    headerName: '仓库名称',
    field: 'warehouseName',
    width: 150
  },
  {
    headerName: '计件日期',
    field: 'reckonPieceDate',
    width: 150
  },
  {
    headerName: '客户名称',
    field: 'customName',
    width: 150
  },
  {
    headerName: '计划单号',
    field: 'planOrderCode',
    width: 150
  },
  {
    headerName: '客户订单号',
    field: 'customOrderCode',
    width: 150
  },
  {
    headerName: '色号',
    field: 'colorCode',
    width: 150
  },
  {
    headerName: '色称',
    field: 'colorName',
    width: 150
  },
  {
    headerName: '交货日期',
    field: 'deliveryDate',
    width: 150
  },
  {
    headerName: '等待工序',
    field: 'waitProcess',
    width: 150
  },
  {
    headerName: '搬运方式',
    field: 'carryTypeName',
    width: 150
  },
  {
    headerName: '生产车间',
    field: 'workshop',
    width: 150
  },
  {
    headerName: '原流转卡号',
    field: 'oldCirculatCard',
    width: 150
  },
  {
    headerName: '对色资料',
    field: 'contrastColor',
    width: 150
  },
  {
    headerName: '生产流程',
    field: 'productionProcess',
    width: 150
  },
  {
    headerName: '备注',
    field: 'remark',
    width: 150
  }, {
    headerName: '创建人',
    field: 'createName',
    width: 150
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 150
  },
  {
    headerName: '修改人',
    field: 'updateName',
    width: 150
  },
  {
    headerName: '修改时间',
    field: 'updateTime',
    width: 150
  },
  {
    headerName: '状态',
    field: 'auditState',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <a-space>
          <el-tag type="success" class="gesture">已审核</el-tag>
        </a-space>
      `,
      setup(props: any) {
        return {}
      }
    }
  },
  {
    headerName: '操作',
    field: 'id',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <el-button style="color:#165dff;" @click="a" class="gesture" link>详情</el-button>
      `,
      setup(props: any) {
        const a = () => {
          editHandler2(props.params.data)
        }
        return {
          a
        }
      }
    }
  }
]
const dc = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '布号',
    field: 'clothCode',
    width: 150,
  },
  {
    headerName: '计划单号',
    field: 'customOrderCode',
    width: 150
  },
  {
    headerName: '品名',
    field: 'brandName',
    width: 150
  },
  {
    headerName: '仓库',
    field: 'warehouseName',
    width: 150
  },
  {
    headerName: '托盘编号',
    field: 'shelvesCode',
    width: 150,
  },
  {
    headerName: '库位',
    field: 'storageName',
    width: 150,
  },
  {
    headerName: '门幅',
    field: 'wdith',
    width: 150
  },
  {
    headerName: '门幅上限',
    field: 'upperLimit',
    width: 150
  },
  {
    headerName: '门幅下限',
    field: 'lowerLimit',
    width: 150,
  },
  {
    headerName: '克重',
    field: 'gramWeight',
    width: 150
  },
  {
    headerName: '克重上限',
    field: 'gramUpperLimit',
    width: 150
  },
  {
    headerName: '克重下限',
    field: 'gramLowerLimit',
    width: 150
  },
  {
    headerName: '匹号',
    field: 'horseNo',
    width: 150,
  },
  {
    headerName: '计划重量',
    field: 'flowCardWeight',
    width: 150
  },
  {
    headerName: '匹数',
    field: 'horseNum',
    width: 150
  },
  {
    headerName: '重量',
    field: 'canUseWeight',
    width: 150
  },
  {
    headerName: '单位',
    field: 'unit',
    width: 150
  },
  {
    headerName: '坯布编号',
    field: 'greyCode',
    width: 150,
  },
  {
    headerName: '坯布名称',
    field: 'greyName',
    width: 150
  },
  {
    headerName: '客户名称',
    field: 'custumName',
    width: 150
  },
  {
    headerName: '操作',
    field: 'id',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <el-button style="color:#165dff;" @click="a" class="gesture" link>库存</el-button>
      `,
      setup(props: any) {
        const a = () => {
          editHandler1(props.params.data)
        }
        return {
          a
        }
      }
    }
  }

]
const dc2 = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '收料单号',
    field: 'deliveryCode',
    width: 150,
  },
  {
    headerName: '送货单位',
    field: 'deliveryDepartmentName',
    width: 150
  },
  {
    headerName: '客户订单',
    field: 'customOrderCode',
    width: 150
  },
  {
    headerName: '坯布编号',
    field: 'greyCode',
    width: 150
  },
  {
    headerName: '坯布名称',
    field: 'greyName',
    width: 150
  },
  {
    headerName: '条形码',
    field: 'clothfiyCode',
    width: 150,
  },
  {
    headerName: '布笼',
    field: 'shelveCode',
    width: 150
  },
  {
    headerName: '织造序号',
    field: 'planOrderCode',
    width: 150
  },
  {
    headerName: '车号',
    field: 'barcode',
    width: 150
  },
  {
    headerName: '匹号',
    field: 'horseNo',
    width: 150
  },
  {
    headerName: '色称',
    field: 'colorName',
    width: 150,
  },
  {
    headerName: '仓位',
    field: 'storageName',
    width: 150
  },
  {
    headerName: '等级',
    field: 'grade',
    width: 150
  },
  {
    headerName: '门幅',
    field: 'width',
    width: 150
  },
  {
    headerName: '克重',
    field: 'gramWeight',
    width: 150
  },
  {
    headerName: '尺寸',
    field: 'inch',
    width: 150,
  },
  {
    headerName: '匹数',
    field: 'horseNum',
    width: 150
  },
  {
    headerName: '重量',
    field: 'weight',
    width: 150
  },
  // {
  //     headerName: '验后重量',
  //     field: 'barcode',
  //     width: 150
  // },
  {
    headerName: '纱批',
    field: 'yarnBatch',
    width: 150
  },
  {
    headerName: '坯布批号',
    field: 'greyBatchNo',
    width: 150
  },
]
const tableColumns = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
  {
    headerName: '入库单号',
    field: 'stockInCode',
    width: 150,
  },

  {
    headerName: '入库时间',
    field: 'stockInDate',
    width: 150,
  },
  {
    headerName: '入库人',
    field: 'stockInName',
    width: 150,
  },
  {
    headerName: '出库单号',
    field: 'stockOutCode',
    width: 150,
  },
  {
    headerName: '出库时间',
    field: 'stockOutDate',
    width: 150,
  },
  {
    headerName: '出库人',
    field: 'stockOutName',
    width: 150,
  },
  {
    headerName: '收料单号',
    field: 'deliveryCode',
    width: 150,
  },
  {
    headerName: '入库类型',
    field: 'stockInTypeName',
    width: 200,
  },
  {
    headerName: '客户订单号',
    field: 'customOrderCode',
    width: 200,
  },
  {
    headerName: '计划单号',
    field: 'planOrderCode',
    width: 200,
  },
  {
    headerName: '织造序号',
    field: 'weaveCode',
    width: 200,
  },
  {
    headerName: '客户名称',
    field: 'customName',
    width: 200,
  },
  {
    headerName: '公司',
    field: 'companyName',
    width: 200,
  },
  {
    headerName: '仓库',
    field: 'warehouseName',
    width: 200,
  },
  {
    headerName: '区域',
    field: 'areaName',
    width: 200,
  },
  {
    headerName: '库位',
    field: 'storageName',
    width: 200,
  },
  {
    headerName: '托盘编号',
    field: 'shelveCode',
    width: 200,
  },
  {
    headerName: '布笼名称',
    field: 'shelveName',
    width: 200,
  },
  {
    headerName: '送货单位',
    field: 'deliveryDepartment',
    width: 200,
  },
  {
    headerName: '品名',
    field: 'brandName',
    width: 200,
  },
  {
    headerName: '色号',
    field: 'colorCode',
    width: 200,
  },
  {
    headerName: '坯布编号',
    field: 'greyCode',
    width: 150,
  },
  {
    headerName: '坯布名称',
    field: 'greyName',
    width: 200,
  },
  {
    headerName: '匹号',
    field: 'horseNo',
    width: 200,
  },
  {
    headerName: '单位',
    field: 'unit',
    width: 200,
  },
  {
    headerName: '等级',
    field: 'grade',
    width: 200,
  },
  {
    headerName: '条码号',
    field: 'clothfiyCode',
    width: 200,
  },
  {
    headerName: '尺寸',
    field: 'inch',
    width: 200,
  },
  {
    headerName: '重量',
    field: 'weight',
    width: 200,
  },
  {
    headerName: '单价',
    field: 'price',
    width: 200,
  },
  {
    headerName: '金额',
    field: 'amount',
    width: 200,
  },
  {
    headerName: '收货单位',
    field: 'shipAddress',
    width: 200,
  },
  {
    headerName: '车牌',
    field: 'carPlate',
    width: 200,
  },
  {
    headerName: '门幅',
    field: 'width',
    width: 200,
  },
  {
    headerName: '克重',
    field: 'gramWeight',
    width: 200,
  },
  {
    headerName: '纱批',
    field: 'yarnBatch',
    width: 200,
  },
  {
    headerName: '流转卡号',
    field: 'circulatCard',
    width: 200,
  },
  {
    headerName: '收货单位',
    field: 'shipAddress',
    width: 200,
  },
  {
    headerName: '创建人',
    field: 'createName',
    width: 200,
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 200,
  },
  {
    headerName: '修改人',
    field: 'updateName',
    width: 200,
  },
  {
    headerName: '修改时间',
    field: 'updateTime',
    width: 200,
  },
  {
    headerName: '布号',
    field: 'clothCode',
    width: 200,
  },
  {
    headerName: '状态',
    field: 'stockState',
    pinned: 'right',
    width: 150,
    cellRenderer: {
      template: `
        <a-space>
          <el-tag type="success" class="gesture">入库</el-tag>
        </a-space>
      `,
      setup(props: any) {
        return {
          stockState: props.params.data.stockState
        }
      }
    }
  },

]
const objectOP = reactive<{
  id: any,
  stockOutDate: any,
  circulatCard: any,
  warehouseName: any,
  warehouseId: any,
  reckonPieceDate: any,
  customName: any,
  planOrderCode: any,
  customOrderCode: any,
  colorCode: any,
  colorName: any,
  deliveryDate: any,
  waitProcess: any,
  carryTypeName: any,
  workshop: any,
  oldCirculatCard: any,
  contrastColor: any,
  productionProcess: any,
  remark: any,
  fastReverseState: number,
  parisonState: number,
  stockOutTypeId: any,
  stockOutTypeName: any,
  stockOutCode: any,
  BlankStockOutDetail: any[],
}>
({

  id: null,
  stockOutDate: '',
  circulatCard: '',
  warehouseName: '',
  warehouseId: null,
  reckonPieceDate: '',
  customName: '',
  planOrderCode: '',
  customOrderCode: '',
  colorCode: '',
  colorName: '',
  deliveryDate: '',
  waitProcess: '',
  carryTypeName: '',
  workshop: '',
  oldCirculatCard: '',
  contrastColor: '',
  productionProcess: '',
  remark: '',
  fastReverseState: 0,
  parisonState: 0,
  stockOutTypeId: 50,
  stockOutTypeName: '毛坯库存出库',
  stockOutCode: '',
  BlankStockOutDetail: [],

});
const OP = reactive<{
  stockId: any,
  stockName: any,
  matchBatchGreyId: any,
}>
({
  stockId: null,
  stockName: '',
  matchBatchGreyId: null,
});
const pageData = reactive<{
  dutymachineState: any,
  sideTitle: string,
  showAdd8: boolean,
  pageLoading: boolean,
  dataList: any
  total: any
  dialogFormVisible: boolean
  pageType: string
  dataListOP: any
  stockOutCode: any



  circulatCard: any,
  customOrderCode: any,
  planOrderCode: any,
  customName: any,
  stockOutDate: any,
  nameList: any[],
  nameList1: any[],
  nameList2: any[],
}>({
  sideTitle: "新增毛坯出库",
  dutymachineState: 0,
  showAdd8: false,
  pageLoading: false,
  dataList: [],
  total: 0,
  dialogFormVisible: false,
  pageType: '',
  dataListOP: [],

  stockOutCode: '',
  circulatCard: '',
  customOrderCode: '',
  planOrderCode: '',
  stockOutDate: '',
  customName: '',
  nameList: [],
  nameList1: [],
  nameList2: [],
});

interface Querin {
  page: any
  size: any
  customOrderCode: Number | String
  custumName: Number | String
  greyName: Number | String
  greyCode: Number | String
  shelvesCode: Number | String
  storageName: Number | String
  inShelveName: Number | String
  companyId: Number | String
  warehouseId: Number | String
  // stockState: any
  isDoes: boolean
  notInListKey: any[]
  clothCode: any
  circulatCard: any
}

let query = reactive<Querin>({
  page: 1,
  size: 10,
  greyCode: '',
  customOrderCode: '',
  custumName: '',
  storageName: '',
  inShelveName: '',
  shelvesCode: '',
  greyName: '',
  companyId: '',
  warehouseId: '',
  // stockState: 1,
  isDoes: true,
  notInListKey: [],
  clothCode: '',
  circulatCard: '',
})
const editHandler = (record: any) => {
  for (var key in record) {
    objectOP[key] = record[key]
  }
  // objectOP.fastReverseState = record.fastReverseState
  outList()
  post({
    url: "/dwWms/BlankStockOutDetail/getList",
    data: {stockOutId: record.id}
  }).then(({code, data, message}: any) => {
    if (code === 200) {
      tableDataList1_2.value = data
    }
  });
  // console.log(objectOP.fastReverseState, record.fastReverseState, '人生得意须尽欢');

  pageData.sideTitle = '修改毛坯出库';
  pageData.showAdd8 = true;

}
// 库存按钮事件
const editHandler1 = (record: any) => {
  // console.log(record);
  // pageData.showAdd8 = true;
  // gridOption1.value.getSelectedRows().filter((o: any) => {
  query.greyCode = record.greyCode,
      query.greyName = record.greyName,
      query.customOrderCode = record.customOrderCode,
      query.warehouseId = record.warehouseId,
      query.shelvesCode = record.shelvesCode,
      query.storageName = record.storageName
  // })
  getList()
  visiblecg.value = true

}
const editHandler2 = (record: any) => {
  post({
    url: "/dwWms/BlankStockOutDetail/getList",
    data: {stockOutId: record.id}
  }).then(({code, data, message}: any) => {
    if (code === 200) {
      tableDataList1_2.value = data
    }
  });
  visiblecg1.value = true
}
const addHandler = () => {
  for (var key in objectOP) {
    if (key == "id") {
      objectOP[key] = null;

    } else {
      objectOP[key] = '';
    }
  }
  post({
    url: "/dwWms/BlankStockOut/getCodeGenerate",
    data: {}
  }).then(({code, data, message}: any) => {
    if (code === 200) {
      objectOP.stockOutCode = data
    }
  });
  pageData.dataList = [];
  tableDataList1_2.value = [];
  tableDataList1.value = [];
  pageData.sideTitle = "新增毛坯出库";
  pageData.showAdd8 = true;
}
const selectHandler = () => {
  if (tabsKeys.value == 1) {
    doRefresh()
  } else if (tabsKeys.value == 2) {
    doRefresh1()
  }
}

const tabsKeys = ref(1)

const tabsChanges = (e: any) => {
  tabsKeys.value = e
  if (e == 1) {
    toolbarList.value = ['查询', '新增', '删除', '审核']
  } else if (e == 2) {
    toolbarList.value = ['查询', '导出']
  }
}
// 明细查询事件
const lookSet = (record: any) => {
  if (objectOP.circulatCard == '' || objectOP.warehouseName == '') {
    // if (objectOP.circulatCard == '') {
    Message.error('请先输入流转卡号和仓库名称！')
    return
  } else {
    for (var key in query) {
      if (key == "id") {
        query[key] = null;

      } else {
        query[key] = '';
      }
    }
    query.isDoes = false
    pageData.nameList2.filter((o: any) => {
      if (o.warehouseName == objectOP.warehouseName) {
        query.warehouseId = o.id
      }
    })
    // query.warehouseId = objectOP.warehouseId
    query.page = 1
    query.size = 10
    // query.stockState = 1
    query.notInListKey = tableDataList1_2.value.map((o: any) => {
      return o.clothfiyCode
    })
    // console.log(query.warehouseId, '1111111111111');

    getList()
    visiblecg.value = true
  }
}
// 明细删除事件
const delet = (record: any) => {
  if (gridOption1_2.value.getSelectedRows().length === 0) {
    Message.error('请先勾选')
    return;
  } else {
    let ob = gridOption1_2.value.getSelectedRows().map((o: any) => {
      return o.id
    })
    const filteredArr = tableDataList1_2.value.filter((item: any) => !ob.includes(item.id));
    tableDataList1_2.value = [...filteredArr]
    // console.log(tableDataList1_2.value, ob, '青青子衿悠悠我心');

  }
}
// 新增事件
const formRef = ref<FormInstance>();
const sideOk = () => {
  // let ob: any[] = []
  tableDataList1_2.value.forEach((o: any) => {
    o.id = ''
    // const oa = {
    //     matchBatchGreyId: o.matchBatchGreyId,
    //     stockId: o.id
    // }
    // ob.push(oa)
    // console.log(o.id, oa, '那是我，也不是我，是以前的我');
  })
  // console.log(ob, tableDataList1_2.value, '或许我就应该相信这才是缘分吧');
  pageData.nameList2.filter((o: any) => {
    if (o.warehouseName == objectOP.warehouseName) {
      objectOP.warehouseId = o.id
    }
  })
  objectOP.stockOutTypeId = 50
  objectOP.stockOutTypeName = '毛坯库存出库'
  objectOP.BlankStockOutDetail = tableDataList1_2.value
  formRef.value?.validate().then((err) => {
    if (!err) {
      if (pageData.sideTitle === "新增毛坯出库") {
        post({
          url: "/dwWms/BlankStockOut/insertList",
          data: objectOP
        }).then((res: any) => {
          if (res.code === 200) {
            formRef.value?.resetFields();
            pageData.showAdd8 = false;
            Message.success({
              content: "新增成功",
              duration: 5000,
            });
            doRefresh();
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            });
          }
        })
      } else {
        post({
          url: "/dwWms/BlankStockOut/updateList",
          data: objectOP
        }).then((res: any) => {
          if (res.code === 200) {
            formRef.value?.resetFields();
            pageData.showAdd8 = false;
            Message.success({
              content: "修改成功",
              duration: 5000,
            });
            doRefresh();
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            });
          }
        })
      }
    }
  });
}
// 收货来源下拉框下拉数据
const focusSel = () => {
  selCxAll({"codeType": ""});
}
const options = ref<any>(pageData.nameList);
const loading = ref(false);
const handleSearch = (value: any) => {
  if (value) {
    const ob = {codeType: value, deleteState: 0}
    loading.value = true;
    selCxAll(ob);
    options.value = pageData.nameList;
    loading.value = false;
  } else {
    options.value = []
  }
};

function selCxAll(val: any) {
  post({
    url: "/dict/dictTypeDetail/getList",
    data: {codeType: 30}
  }).then(({data, code}: any) => {
    if (code === 200) {
      pageData.nameList = data;
    } else {
      Message.error({
        content: "查询失败！",
        duration: 5000,
      });
    }
  });
}

// 客户名称下拉框下拉数据
const focusSel1 = () => {
  selCxAll1({"customName": ""});
}
const options1 = ref<any>(pageData.nameList1);
const loading1 = ref(false);
const handleSearch1 = (value: any) => {
  if (value) {
    const ob = {customName: value, deleteState: 0}
    loading1.value = true;
    selCxAll1(ob);
    options1.value = pageData.nameList1;
    loading1.value = false;
  } else {
    options1.value = []
  }
};

function selCxAll1(val: any) {
  post({
    url: "/aps/custom/getDropValue",
    data: val
  }).then(({data, code}: any) => {
    if (code === 200) {
      pageData.nameList1 = data;
    } else {
      Message.error({
        content: "查询失败！",
        duration: 5000,
      });
    }
  });
}

// 仓库下拉框下拉数据
const focusSel2 = () => {
  selCxAll2({warehouseTypeName: "毛坯仓"});
}
const options2 = ref<any>(pageData.nameList2);
const loading2 = ref(false);
const handleSearch2 = (value: any) => {
  if (value) {
    const ob = {deleteState: 0, warehouseTypeName: "毛坯仓"}
    loading2.value = true;
    selCxAll2(ob);
    options2.value = pageData.nameList2;
    loading2.value = false;
  } else {
    options2.value = []
  }
};

function selCxAll2(val: any) {
  post({
    url: "/dwWms/warehouse/getWarehouseByPara",
    data: val
  }).then(({data, code}: any) => {
    if (code === 200) {
      pageData.nameList2 = data;
    } else {
      Message.error({
        content: "查询失败！",
        duration: 5000,
      });
    }
  });
}

// 未审核页面审核方法
const audits = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    Message.error('请先勾选')
    return;
  }
  Modal.confirm({
    title: '系统提示',
    content: '是否审核此订单',
    onOk() {
      post({
        url: "/dwWms/BlankStockOut/setAudit",
        // data: auditStateId,
        data: gridOption.value.getSelectedRows().map((item: any) => {
          return {id: item.id, auditState: 1}
        })
      }).then((res: any) => {
        if (res.code === 200) {
          doRefresh();
          Message.success('审核通过')
          // selectedRowKeys.value = []
        } else {
          Message.error(res.message)
        }
      })
    }
  })
}
// 删除事件
const deleteHandler = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    Message.error('请先勾选')
    return;
  }
  Modal.confirm({
    title: "系统提示",
    content: "确认删除选中的数据?",
    onOk() {
      post({
        url: "/dwWms/BlankStockOut/delete",
        data: gridOption.value.getSelectedRows().map((o: any) => {
          return o.id
        })
      }).then(({code, data, message}: any) => {
        if (code === 200) {
          Message.success({
            content: "删除成功",
            duration: 5000,
          });

          pagination.page = 1
          doRefresh();

        } else {
          Message.error({
            content: '删除失败',
            duration: 5000,
          });
        }

      });
    },
  });
};
// 未审核查询事件
const total = ref(10);
const total1 = ref(10);
const pagingList1: any = ref(pagingList)
const page = ref(1);
const size = ref(10);

function doRefresh() {
  pageData.pageLoading = true
  post({
    url: "/dwWms/BlankStockOut/getPage",
    data: {
      page: pagination.page,
      size: pagination.pageSize,

      circulatCard: pageData.circulatCard,
      customOrderCode: pageData.customOrderCode,
      planOrderCode: pageData.planOrderCode,
      stockOutDate: pageData.stockOutDate,
      customName: pageData.customName,
      auditState: 0,
      deleteState: 0,
    },
  })
      .then(({data, code}: any) => {
        if (code === 200) {

          table.handleSuccess(data.list);
          gridOption.value.setRowData(data.list)
          total.value = data.total;

        }
      })
      .catch(console.log).finally(() => {
    pageData.pageLoading = false
  })
}

// 已审核查询
function doRefresh1() {
  pageData.pageLoading = true
  post({
    url: "/dwWms/BlankStockOut/getPage",
    data: {
      page: pagination.page,
      size: pagination.pageSize,
      circulatCard: pageData.circulatCard,
      customOrderCode: pageData.customOrderCode,
      planOrderCode: pageData.planOrderCode,
      stockOutDate: pageData.stockOutDate,
      customName: pageData.customName,
      auditState: 1,
      deleteState: 0,
    },
  })
      .then(({data, code}: any) => {
        if (code === 200) {

          table.handleSuccess(data.list);
          // gridOption2.value.setRowData(data.list)
          pageData.dataListOP = data.list
          total1.value = data.total;

        }
      })
      .catch(console.log).finally(() => {
    pageData.pageLoading = false
  })
}

const {selectedRowKeys, onSelectionChange} = useRowSelection();
const pagination = usePagination(doRefresh);
const pagination2 = usePagination(doRefresh1);
const table = useTable();
const rowKey = useRowKey("id");


// 弹窗明细数据查询事件
let loadingElplus = ref<boolean>(false)
const getList = async () => {
  try {
    loadingElplus.value = true
    let {code, data, message} = await post({
      url: '/dwWms/BlankStock/getPage',
      data: query,
    })
    if (code && code == 200) {
      pageData.dataList = data.list
      pageData.total = data.total
      loadingElplus.value = false
      return
    }
    pageData.dataList = []
  } catch {
    pageData.dataList = []
  } finally {
    loadingElplus.value = false
  }
}
const changeSize = (val: any) => {
  query.size = val
  getList()
}
// 弹窗明细数据筛选完拆分事件
let form = ref<any>({
  id: '',
  formerWeight: '',
  areaName1: '',
})
let loadingElplus1 = ref<boolean>(false)
let cascaderRef = ref('')
const splitAdjustment = (type: string) => {
  let selsetionList = gridOption5.value.getSelectedRows()
  if (selsetionList.length == 0) {
    Message.error({
      content: '请选择您的单据',
      duration: 5000,
    });
    return
  } else {
    form.value = {}
    form.value.formerWeight = selsetionList[0].weight
    form.value.clothfiyCode = selsetionList[0].clothfiyCode
    form.value.splitWeight = ''
    form.value.id = selsetionList[0].id
  }
  pageData.pageType = type
  pageData.dialogFormVisible = true
}
// 弹窗明细数据筛选拆分保存事件
const save = async () => {
  try {
    loadingElplus1.value = true
    let {code, message} = await post({
      url: '/dwWms/BlankStock/stockSplit',
      data: form.value
    })
    if (code == 200) {
      getList()
      pageData.dialogFormVisible = false
      loadingElplus1.value = false
      Message.success({
        content: "拆分成功",
        duration: 5000,
      });

    } else {
      Message.error({
        content: '拆分失败',
        duration: 5000,
      });
    }

  } finally {
    loadingElplus1.value = false
  }

}
// 弹窗明细数据筛选保存事件
let visiblecg = ref(false)
let visiblecg1 = ref(false)
const print = () => {
  let oa = ''
  gridOption1.value.getSelectedRows().map((o: any) => {
    return oa = o.id
  })
  // console.log(oa, '是谁的心啊孤单的留下');

  let ob: any[] = []
  ob = tableDataList1_2.value
  gridOption5.value.getSelectedRows().map((o: any) => {
    o.matchBatchGreyId = oa;
    ob.push(o)
  })
  tableDataList1_2.value = [...ob]
}
// 流转卡带出数据事件
const CKonly = (ress: any) => {
  post({
    url: "/dwWms/BlankStockOut/getCirculatCard",
    data: {flowCardCode: objectOP.circulatCard}
  }).then(({code, data, message}: any) => {
    if (code === 200) {
      objectOP.warehouseName = data[0].warehouseName,
          objectOP.warehouseId = data[0].warehouseId,
          objectOP.customName = data[0].customName,
          objectOP.planOrderCode = data[0].planOrderCode,
          objectOP.customOrderCode = data[0].customOrderCode,
          objectOP.colorCode = data[0].colorCode,
          objectOP.colorName = data[0].colorName,
          objectOP.waitProcess = data[0].waitProcess,
          objectOP.contrastColor = data[0].contrastColor,
          objectOP.fastReverseState = data[0].fastReverseState,
          objectOP.productionProcess = data[0].productionProcess,
          objectOP.parisonState = data[0].parisonState
    }
  });
  outList()

}
// 库存表格数据查询事件（修改）
const outList = () => {
  post({
    url: "/dwWms/BlankStockOut/getCirculatCardMatchBatchgrey",
    data: {flowCardCode: objectOP.circulatCard}
  }).then(({code, data, message}: any) => {
    if (code === 200) {
      tableDataList1.value = data
    }
  });
}


</script>
<script lang="ts">
export default {
  name: "OrderDeliveryList6",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
